<!DOCTYPE html>
<?php require("linkedin/index.php");
//$donneeChris = getInfos();
?>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
   html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    #bar{
      width:100%;
      height:55px;
      background-color: white;
      border-bottom: 1px solid grey;
      position: fixed;
      top:0;
      z-index: 100;
    }
    #content_box{
      float: right;
      width:300px;
      height:100%;
      background-color: #f7f2f2;
      border-left: 1px solid #bdc3c7;
    }
    #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -280px;
        z-index: 5;
        padding: 5px;
      }
      #panelLinkedin{
        position: absolute;
        top: 200px;
        left: 85%;
        border: 1px solid #999;
        height: 400px;
        width: 190px;
        background: rgba(236, 240, 241,0.3);   
        overflow-y:scroll;
        overflow-x:hidden;

      }
    </style>
    <script type="text/javascript"
src="http://gdc.indeed.com/ads/apiresults.js">
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
      
       <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script>
       <script type="text/javascript"
src="http://gdc.indeed.com/ads/apiresults.js"></script>
                                    
    <script>

var map;
var markers = [];
var infowindow = new google.maps.InfoWindow(); 
var creve = '<?php  echo getInfos(); ?>'; 
var donneLink = JSON.parse(creve);
var tailleDonnee = objLength(donneLink);

function objLength(obj){
  var i=0;
  for (var x in obj){
    if(obj.hasOwnProperty(x)){
      i++;
    }
  } 
  return i;
}
 function recupereCompany(obj){
  if (obj == undefined) {

return "pas de job"
  }
  else{
     var chaine = obj.toString();
  var liste = chaine.split(",");

  return liste[1];
  }
 
 }

$(document).ready(function() {
  for(var z=0; z<tailleDonnee-1; z++){
    //var tab = donneLink[z].split(",");
    $("#content_box").append("<b><a class='link'>"+donneLink[z]+"</a></b><br/>");
  }

$(".link").click(function() {
var text = $(this).html();
var comp = text.split(",");
//alert(comp[1]);

      event.preventDefault();

      var ville= $("#ville").val();
      var cle = comp[1];
      var lien = "http://localhost/jobfinderxml/test.php?ville="+ville+"&cle="+cle;
     
    $.getJSON(lien, function(json){
      console.log("succes");
     var res = JSON.parse(json);
    
   
      deleteMarkers();
     //LEs coordonnées de la ville d'origne
    var origine = new google.maps.LatLng(res.latVille, res.longVille); 
    
  //  console.log("test");
    addMarker(origine,'welcome', ville);

  //La variable qui nous permettra d'afficher les cercles sur la carte
    var circle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.15,
      map: map,
      center: origine,
      radius: Math.sqrt(9000) * 100

    });

  
    //console.log(google.maps.geometry.spherical.computeDistanceBetween(aulnay,paris));
    //Boucle pour afficher tous les markers après chaque recherche
   for (var i =0; i<res.information.length; i++ ){
      var point = new google.maps.LatLng(res.information[i].latitude, res.information[i].longitude); 
      //if(google.maps.geometry.spherical.computeDistanceBetween(origine,point) > 300000){
          for ( var j = 0; j<tailleDonnee; j++){
            if(compareCompany(res.information[i].company, recupereCompany(donneLink[j]) )){
                  // addMarker(point,res.information[i].jobtitle, res.information[i].company);
            }
          }
          addMarker(point,res.information[i].jobtitle, res.information[i].company);
      //}

    }
    console.log("fin loop");
  
      google.maps.event.trigger(map, "resize"); 
        map.setCenter(origine);
      
          }
      );
});
});

 function recupereNom(obj){
  if (obj == undefined) {
    return "pas de job"
  }
  else{
    console.log("dans fonction");
    var chaine = obj.toString();
    var liste = chaine.split(",");
    console.log("dans fonction2");

    return liste[0];
  }
 //}
 //var d1 = $("#panelLinkedin");//document.getElementById('panelLinkedin');
 /*for(var z=0; z<tailleDonnee-1; z++){
  /*$("#content_box").append("hello");
  $("#content_box").append("<b>Appended text</b>");*/
 //);

 }

 function compareCompany(obj1 , obj2){
  var bool = false;
 if ((obj1 !== undefined)&&(obj2 !== undefined)){
  var comp1 = obj1.toString();
  var comp2 = obj2.toString();

  var chaineComp1 = comp1.split(" ");
  var chaineComp2 = comp2.split(" ");
  var compteur = 0;
  for( var i = 0; i<chaineComp1.length ; i++){
    for(var j=0; j<chaineComp2.length ;j++){
      if(( chaineComp1[i] == chaineComp2[j] )&&(chaineComp1[i].length>2)){
        compteur ++;
      }
    }
  }

  if(compteur >= 1){
    bool = true;
  }
    
 }

 return bool;
 }

  

function initialize() {
  var premier = new google.maps.LatLng(48.8558086, 2.3315675000000056);
  var mapOptions = {
    zoom: 12,
    center: premier,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // info windon static pour tous les info bulles
//   infowindow = new google.maps.InfoWindow;
 
  // Adds a marker at the center of the map.
  addMarker(premier, 'welcome', 'Paris');
  var currCenter = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(currCenter);
}

//Image pour l'icone à afficher
var images = new google.maps.MarkerImage( 'images/anans.png',
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(70, 70));
// Add a marker to the map and push to the array.
function addMarker(location, informationJob, titleJob) {

  var contentString = '<div id="content">'+
      '<h3 id="firstHeading" class="firstHeading">'+titleJob+'</h3>'+
      '<div id="bodyContent">'+
      '<p>'+informationJob+'</p>'+
      '</div>'+
      '</div>';


  var marker = new google.maps.Marker({
    position: location,
    map: map,
    icon: images,
    title: titleJob
  });

  google.maps.event.addListener(marker,'click',function(){
    infowindow.setContent(contentString);
    infowindow.open(map,marker);
  });
  markers.push(marker);
}

// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}

// Shows any markers currently in the array.
function showMarkers() {
  setAllMap(map);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}


google.maps.event.addDomListener(window, 'load', initialize);

  

 </script>


    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
  </head>
	 <body>
      <div id="bar">
    <!--  <?php var_dump(getinfos());?>-->
       <div id="panel">        
              <form id="form" method="post" action="index.php">
            <div class="col-sm-4">
                <input type="text" required="required"  class="form-control" name="ville" id="ville" placeholder="entrez votre ville...">
            </div>
             <div class="col-sm-4">
                <input type="text"   class="form-control" name="cle" id="cle" placeholder="Que recherchez-vous ?">
            </div>
            <div class="col-sm-4">
                <button type="submit" id="rechercher" class="btn btn-warning">Rechercher</button>
            </div>

          </form>
        </div>
      </div>
      <div id="content_box">
      </div>
	  		<div id="map-canvas">
	  			
         
	  	</div>
    <script type="text/javascript">

   $(document).ready(function() {
		$("#rechercher").click(function(e){
			event.preventDefault();

			var ville= $("#ville").val();
      var cle = $("#cle").val();
     	var lien = "http://localhost/jobfinderxml/test.php?ville="+ville+"&cle="+cle;
     
    $.getJSON(lien, function(json){
      console.log("succes");
     var res = JSON.parse(json);
    
   
      deleteMarkers();
     //LEs coordonnées de la ville d'origne
    var origine = new google.maps.LatLng(res.latVille, res.longVille); 
    
  //  console.log("test");
    addMarker(origine,'welcome', ville);

  //La variable qui nous permettra d'afficher les cercles sur la carte
    var circle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.15,
      map: map,
      center: origine,
      radius: Math.sqrt(9000) * 100

    });

  
    //console.log(google.maps.geometry.spherical.computeDistanceBetween(aulnay,paris));
    //Boucle pour afficher tous les markers après chaque recherche
   for (var i =0; i<res.information.length; i++ ){
      var point = new google.maps.LatLng(res.information[i].latitude, res.information[i].longitude); 
      //if(google.maps.geometry.spherical.computeDistanceBetween(origine,point) > 300000){
          for ( var j = 0; j<tailleDonnee; j++){
            if(compareCompany(res.information[i].company, recupereCompany(donneLink[j]) )){
                  // addMarker(point,res.information[i].jobtitle, res.information[i].company);
            }
          }
          addMarker(point,res.information[i].jobtitle, res.information[i].company);
      //}

    }
    console.log("fin loop");
  
      google.maps.event.trigger(map, "resize"); 
        map.setCenter(origine);
      
          }
      );
		});
 
		});
    </script>
	</body>	
</html>